import { Form, Select, Input, Button, Spin, message } from 'antd';
import React from 'react';
import request from '@/utils/request';
import _ from 'lodash';

const { Option } = Select;

@Form.create()
export default class Login extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: '{}',
      spinning: false,
    };
  }

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, obj) => {
      if (!err) {
        this.setState({
          spinning: true,
        });
        try {
          let { params, data } = obj;
          if (!_.isEmpty(params)) {
            params = JSON.parse(params.replace(/\s*/g, ''));
          } else {
            params = {};
          }
          request(`${obj.url}`, {
            method: obj.type,
            params,
            data,
          }).then(res => {
            this.setState({
              data: JSON.stringify(res, null, 4),
              spinning: false,
            });
          });
        } catch {
          message.warning('参数格式不正确', 1, () => {
            this.setState({
              spinning: false,
            });
          });
        }
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { spinning, data } = this.state;
    return (
      <Spin tip="Loading..." spinning={spinning}>
        <Form labelCol={{ span: 5 }} wrapperCol={{ span: 12 }} onSubmit={this.handleSubmit}>
          <Form.Item label="url">
            {getFieldDecorator('url', {
              initialValue: '',
              rules: [{ required: true, message: 'Please input your url!' }],
            })(<Input placeholder="esbSync/buildFormatArea" />)}
          </Form.Item>
          <Form.Item label="type">
            {getFieldDecorator('type', {
              initialValue: 'GET',
            })(
              <Select placeholder="type">
                <Option value="GET">GET</Option>
                <Option value="POST">POST</Option>
                <Option value="PUT">PUT</Option>
                <Option value="DELETE">DELETE</Option>
              </Select>,
            )}
          </Form.Item>
          <Form.Item label="params">
            {getFieldDecorator('params', {
              initialValue: '',
            })(
              <Input.TextArea autoSize={{ minRows: 5 }} placeholder='格式示例：{"name":"小明"}' />,
            )}
          </Form.Item>
          <Form.Item label="data">
            {getFieldDecorator('data', {
              initialValue: '',
            })(<Input.TextArea autoSize={{ minRows: 5 }} />)}
          </Form.Item>
          <Form.Item wrapperCol={{ span: 12, offset: 5 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
            <Button style={{ marginLeft: 20 }} onClick={() => this.props.form.resetFields()}>
              重置
            </Button>
          </Form.Item>
          <Form.Item label="报文">
            <Input.TextArea value={data} autoSize={{ minRows: 3 }} />
          </Form.Item>
        </Form>
      </Spin>
    );
  }
}
